<template>
  <div class="content">
    <div class="bg6">
      <img class="bg6" src="../../assets/ProduceTotalKanban.png" alt="" />
      <div class="progress">
        <div class="flex fff">
          <span class="kuai"></span>
          <span class="yujin">预警</span>
        </div>
        <div class="progressContent flexCenter">
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="90"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="80"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="70"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="60"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="50"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="40"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="30"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
          <div class="flexCenter progressBox">
            <span class="mr-5">字段1</span>
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="20"
              color="#01d0a4"
              style="width: 72%"
            />
            <span class="ml-5">1221</span>
          </div>
        </div>
      </div>
      <div class="yield fff">
        <div class="yieldLeft">
          <div class="yieLeftTitle">本月产量</div>
          <div class="yieLeftBox">
            <span>30522</span>
            <span class="dun">吨</span>
          </div>
        </div>
        <div class="yieldRight">
          <div class="yieldcenter">
            <div class="mb-5">本月达成</div>
            <el-progress type="dashboard" :width="60" :percentage="81" color="#e7fc2d" />
          </div>
          <div class="yieldcenter">
            <div class="mb-5">本周达成</div>
            <el-progress type="dashboard" :width="60" :percentage="17" color="#cc6263" />
          </div>
          <div class="yieldcenter">
            <div class="mb-5">本日达成</div>
            <el-progress type="dashboard" :width="60" :percentage="2" color="#30518d" />
          </div>
        </div>
      </div>
      <div class="SecondaryDistributionRate">
        <div class="flex fff">
          <span class="kuai"></span>
          <span class="yujin">次布率排行榜</span>
        </div>
        <div ref="letfMain" class="letfMain"></div>
      </div>
      <div class="ProductionPlan">
        <div class="flex fff">
          <span class="kuai"></span>
          <span class="yujin">生产计划</span>
        </div>
        <div ref="rightMain" class="rightMain"></div>
      </div>
      <div class="ReceivingQuantity">
        <div class="flex fff">
          <span class="kuai"></span>
          <span class="yujin"> 接单量 </span>
        </div>
        <div ref="QuantityMain" class="QuantityMain"></div>
      </div>
      <div class="PlannedQuantity">
        <div class="flex fff">
          <span class="kuai"></span>
          <span class="yujin"> 本月计划量 </span>
        </div>
        <div class="Planned">
          <div class="PlannedTitle">
            <span class="zfx"></span>
            <span>计划总量</span>
            <span class="zfx lv"></span>
            <span>完成量</span>
            <span class="zfx huang"></span>
            <span>未完成量</span>
          </div>
          <div class="tiao">
            <div class="jdt flexCenter">350KG</div>
            <div class="jdt1 flexCenter">250KG</div>
          </div>
        </div>
      </div>
      <div class="PlanningMachine">
        <div class="flex fff">
          <span class="kuai"></span>
          <span class="yujin"> 本月计划机台 </span>
        </div>
        <div class="Planned">
          <div class="PlannedTitle">
            <span class="zfx" style="background-color: #fff"></span>
            <span>总重量</span>
            <span class="zfx lv" style="background-color: #f37878"></span>
            <span>已完成</span>
            <span class="zfx huang" style="background-color: #595053"></span>
            <span>未完成</span>
          </div>
          <div class="tiao">
            <div class="jdt flexCenter" style="background-color: #fff">350KG</div>
            <div
              class="jdt1 flexCenter"
              style="background-color: #f37878; left: 53%; padding-left: 80px"
              >1</div
            >
            <div
              class="jdt1 flexCenter"
              style="background-color: #595053; left: 45%; padding-left: 80px"
              >1</div
            >
          </div>
        </div>
      </div>
      <div class="CurrentShipment">
        <div class="flex fff">
          <span class="kuai"></span>
          <span class="yujin"> 本日出货 </span>
        </div>
        <div class="Planned">
          <div class="PlannedTitle">
            <span class="zfx" style="background-color: #fff"></span>
            <span>出货总重量</span>
            <span class="zfx lv"></span>
            <span>已出货重量</span>
            <span class="zfx huang"></span>
            <span>未出货重量</span>
          </div>
          <div class="tiao">
            <div class="jdt flexCenter">350KG</div>
            <div class="jdt1 flexCenter">250KG</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'

const letfMain = ref<any>()
const rightMain = ref<any>()
const QuantityMain = ref<any>()
const myChartInit = ref<any>()
let myChartQuantity = null
const arr1 = ref([
  { product: '2023-3-10', 出缸缸数: 43.3, 排缸数: 85.8 },
  { product: '2023-3-9', 出缸缸数: 83.1, 排缸数: 73.4 },
  { product: '2023-3-8', 出缸缸数: 86.4, 排缸数: 65.2 },
  { product: '2023-3-6', 出缸缸数: 72.4, 排缸数: 53.9 },
  { product: '2023-3-5', 出缸缸数: 72.4, 排缸数: 53.9 },
  { product: '2023-3-4', 出缸缸数: 72.4, 排缸数: 53.9 },
  { product: '2023-3-3', 出缸缸数: 72.4, 排缸数: 53.9 },
])
const optionnmb = reactive<any>({
  title: {
    text: '',
  },
  tooltip: {
    trigger: 'axis',
  },
  // legend: {
  //   data: [
  //     { name: '出缸缸数', textStyle: { color: '#ffffffbf' } },
  //     { name: '排缸数', textStyle: { color: '#ffffffbf' } },
  //   ],
  // },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '8%',
    containLabel: true,
  },
  color: ['#e7fc2d', '#cc6263'],
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2023-3-10', '2023-3-9', '2023-3-8', '2023-3-7', '2023-3-6', '2023-3-5', '2023-3-4'],

    axisLine: {
      lineStyle: {
        color: '#ffffffbf',
        width: 2,
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#ffffffbf',
        width: 2,
      },
    },
    axisLabel: {
      formatter: '{value} %',
    },
  },
  series: [
    {
      name: '出缸缸数',
      type: 'line',
      data: [120, 132, 160, 134, 90, 230, 210],
      symbolSize: 0,
      smooth: true,
      areaStyle: {
        color: '#3678b1ab',
      },
      color: '#e7fc2d',
    },
    {
      name: '排缸数',
      type: 'line',
      data: [120, 182, 30, 234, 290, 330, 310],
      symbolSize: 0,
      smooth: true,
      areaStyle: {
        color: '#3678b1cc',
      },
      color: '#cc6263',
    },
  ],
})
const optionQuantity = reactive<any>({
  title: {
    text: '',
  },
  tooltip: {
    trigger: 'axis',
  },
  // legend: {
  //   data: ['E', 'P', 'T'],
  //   axisLine: {
  //     lineStyle: {
  //       color: '#ffffffbf',
  //       width: 2,
  //     },
  //   },
  // },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '2%',
    top: '8%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['2016', '2017', '2018', '2019'],
    axisPointer: {
      type: 'shadow',
    },
    axisLine: {
      lineStyle: {
        color: '#ffffffbf',
        width: 2,
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '单位/万',
      min: 0,
      max: 250,
      interval: 50,
      // axisLabel: {
      //   formatter: '{value} 万',
      // },
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    {
      type: 'value',
      name: '比率',
      min: 0,
      max: 50,
      interval: 5,
      axisLabel: {
        formatter: '{value} %',
      },
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
  ],
  series: [
    {
      name: 'E',
      type: 'bar',
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
          // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
          offset: 0,
          color: '#7ed875',
        },
        {
          offset: 1,
          color: '#10c7ad',
        },
      ]),
      itemStyle: {
        normal: {
          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
          barBorderRadius: [10, 10, 10, 10],
        },
      },
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' %'
        },
      },
      data: [200, 200, 200, 200],
    },
    {
      name: 'P',
      type: 'bar',
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
          // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
          offset: 0,
          color: '#367ef7',
        },
        {
          offset: 1,
          color: '#4c6af0',
        },
      ]),
      itemStyle: {
        normal: {
          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
          barBorderRadius: [10, 10, 10, 10],
        },
      },
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' %'
        },
      },
      data: [80, 80, 80, 80],
    },
    {
      name: 'A',
      type: 'bar',
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
          // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
          offset: 0,
          color: '#fac61e',
        },
        {
          offset: 1,
          color: '#fa9424',
        },
      ]),
      itemStyle: {
        normal: {
          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
          barBorderRadius: [10, 10, 10, 10],
        },
      },
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' %'
        },
      },
      data: [60, 30, 30, 30],
    },
    {
      name: 'T',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      symbolSize: 1,
      itemStyle: {
        normal: {
          color: '#fff', //改变折线点的颜色
          lineStyle: {
            color: '#f3bd15', //改变折线颜色
          },
        },
      },
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' %'
        },
      },
      data: [30, 15, 41, 50],
    },
    {
      name: 'T',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      symbolSize: 1,
      itemStyle: {
        normal: {
          color: '#fff', //改变折线点的颜色
          lineStyle: {
            color: '#3c82c1', //改变折线颜色
          },
        },
      },
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' %'
        },
      },
      data: [30, 40, 32, 26],
    },
    {
      name: 'B',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      symbolSize: 1,
      itemStyle: {
        normal: {
          color: '#fff', //改变折线点的颜色
          lineStyle: {
            color: '#87d87c', //改变折线颜色
          },
        },
      },
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ' %'
        },
      },
      data: [30, 40, 50, 9],
    },
  ],
})
const getEcharts = () => {
  myChartInit.value = echarts.init(letfMain.value)
  let option = {
    legend: {
      data: [
        { name: '出缸缸数', textStyle: { color: '#ffffffbf' } },
        { name: '排缸数', textStyle: { color: '#ffffffbf' } },
      ],
    },
    tooltip: {},
    dataset: {
      dimensions: ['product', '出缸缸数', '排缸数'],
      source: arr1.value,
    },
    color: ['#00d0a8', '#00a6f0'],
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    yAxis: {
      animationDuration: 300,
      animationDurationUpdate: 300,
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    series: [{ type: 'bar' }, { type: 'bar' }],
    animationDuration: 0,
    animationDurationUpdate: 800,
  }
  myChartInit.value.setOption(option)
}
let myChart1Init: any
const getEcharts1 = () => {
  myChart1Init = echarts.init(rightMain.value)
  myChart1Init.setOption(optionnmb)
}
const getQuantityMainEcharts = () => {
  myChartQuantity = echarts.init(QuantityMain.value)
  myChartQuantity.setOption(optionQuantity)
}
//初始化
onMounted(() => {
  nextTick(() => {
    getEcharts()
    getEcharts1()
    getQuantityMainEcharts()
   
  })
})
</script>
<script lang="ts">
export default defineComponent({
  name: 'kanbanOfWeavingFactory',
})
</script>
<style scoped>
.content {
  background-color: #fff;
  height: 100%;
  width: 100%;
}
.bg6 {
  width: 100%;
  height: 100%;
  position: relative;
}
.progress {
  width: 29%;
  height: 43.5%;
  position: absolute;
  z-index: 100;
  top: 99px;
  left: 15px;
  padding: 10px;
  box-sizing: border-box;
}
.kuai {
  background: #5cc6e5;
  width: 5px;
  height: 20px;
  display: block;
}
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex {
  display: flex;
}
.fff {
  color: #fff;
}
.yujin {
  margin-left: 8px;
  font-size: 16px;
}
.progressContent {
  color: #6880a2;
  flex-flow: row wrap;
  margin-top: 10px;
}
.progressBox {
  color: #6880a2;
  width: 100%;
  margin: 10px 0;
}
:deep(.el-progress-bar__outer) {
  background: #011446;
}
.mr-5 {
  margin-right: 5px;
}
.ml-5 {
  margin-right: 5px;
}
:deep(.el-progress-bar__inner) {
  background-image: linear-gradient(to right, #00a6f0, #00d0a8) !important;
}
.yield {
  width: 39%;
  height: 14%;
  position: absolute;
  z-index: 100;
  top: 14%;
  left: 30.5%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.yieldLeft {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.yieLeftTitle {
  font-size: 16px;
  width: 100%;
}
.yieLeftBox {
  width: 82%;
  border-bottom: 2px solid #ffffff8f;
  border-top: 2px solid #ffffff8f;
  color: yellow;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.dun {
  font-size: 22px;
  color: #fff;
  margin-left: 2px;
}
.yieldRight {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.yieldcenter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.mb-5 {
  margin-bottom: 8px;
}
.SecondaryDistributionRate {
  width: 29%;
  height: 32%;
  position: absolute;
  z-index: 100;
  top: 59%;
  left: 1%;
  padding: 10px;
  box-sizing: border-box;
}
.letfMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
.rightMain {
  width: 100%;
  height: 85%;
  z-index: 100;
}
.QuantityMain {
  width: 100%;
  height: 90%;
  z-index: 100;
}
.ProductionPlan {
  width: 39%;
  height: 32%;
  position: absolute;
  z-index: 100;
  top: 59%;
  left: 30.5%;
  padding: 10px;
  box-sizing: border-box;
}
.ReceivingQuantity {
  width: 39%;
  height: 28.5%;
  position: absolute;
  z-index: 100;
  top: 29%;
  left: 30.5%;
  padding: 10px;
  box-sizing: border-box;
}
.PlannedQuantity {
  width: 29%;
  height: 24.5%;
  position: absolute;
  z-index: 100;
  top: 14%;
  left: 70%;
  padding: 10px;
  box-sizing: border-box;
}
.PlannedTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.Planned {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-flow: row wrap;
}
.PlanningMachine {
  width: 29%;
  height: 24.5%;
  position: absolute;
  top: 40%;
  left: 70%;
  padding: 10px;
  box-sizing: border-box;
}
.CurrentShipment {
  width: 29%;
  height: 24.5%;
  position: absolute;
  top: 66%;
  left: 70%;
  padding: 10px;
  box-sizing: border-box;
}
.zfx {
  width: 10px;
  height: 10px;
  background: #00a6f0;
  margin-right: 5px;
  margin-left: 10px;
}
.lv {
  background: #6bfb6e;
}
.huang {
  background: #e6ff62;
}
.tiao {
  width: 100%;
  height: 70px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}
.jdt {
  width: 55%;
  background: #6bfb6e;
  border-radius: 50px;
  height: 20%;
  position: absolute;
  left: 12%;
  z-index: 1;
}
.jdt1 {
  position: absolute;
  left: 58%;
  width: 31%;
  background: #e6ff62;
  border-radius: 50px;
  height: 20%;
  padding-left: 28px;
}
:deep(.el-progress__text) {
  color: #fff !important;
}
</style>
